<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=">
    <style type="text/css">
body {
  position: relative;
  width: 100%;
  height: 100%;
}

#box {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script src="https://unpkg.com/rxjs@5.5.2/bundles/Rx.min.js"></script>
    <script>
const box = document.querySelector('#box');
const mouseDown$ = Rx.Observable.fromEvent(box, 'mousedown');
const mouseUp$ = Rx.Observable.fromEvent(box, 'mouseup');
const mouseOut$ = Rx.Observable.fromEvent(box, 'mouseout');
const mouseMove$ = Rx.Observable.fromEvent(box, 'mousemove');

const drag$ = mouseDown$.concatMap((startEvent)=> {
  const initialLeft = box.offsetLeft;
  const initialTop = box.offsetTop;
  const stop$ = mouseUp$.merge(mouseOut$);

  return mouseMove$.takeUntil(stop$).map(moveEvent => {
    return {
      x: moveEvent.x - startEvent.x + initialLeft,
      y: moveEvent.y - startEvent.y + initialTop,
    };
  });
});

drag$.subscribe(event => {
  box.style.left = event.x + 'px';
  box.style.top = event.y + 'px';
});
    </script>
  </body>
</html>

